<style lang='less' scoped>
    .choose-img{
        width: 100%;
        min-height: 140px;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding: 20px;
        box-sizing: border-box;
        border-top: 1px soldi #e5e5e5;
        border-bottom: 1px soldi #e5e5e5;
        .add-img_btn{
           width: 103px;
           height: 103px;
           display: flex;
           margin: 5px;
           position: relative;
           justify-content: center;
           align-items: center;
           flex-direction:column;
           background: #f0f0f0;
           img.add{
               width: 60px;
               height: 60px;
           }
           img.icon{
               width: 100%;
               height: 100%;
               display: block;
           }
           .icon-shanchu{
               position: absolute;
               top: -5px;
               right: -5px;
               color: #940202;
           }

        }
    }
</style>
<template>
    <div class="choose-img" >
       <div class="add-img_btn" @click="uploadImg">
           <img :src="addIcon" class="add"/>
           <span class="text-gray text-14">添加图片</span>
       </div>
        <div class="add-img_btn" v-for="(item,index) in imgTrList" :key="index">
            <img mode="widthFix" class="icon" :src="item" @click="preViewImg(item)"/>
            <span class="iconfont icon-shanchu text-20" @click="removeImg(index)"></span>
        </div>
    </div>
</template>

<script>

import addIcon from '@/assets/images/add.png'
export default {
    props:{
       imgList: {
           default:[],
           type:Array,
           required:true,
       }
    },
    data(){
        return {
          imgTrList:[],  
          addIcon:addIcon  
        }
    },
    methods: {
        uploadImg(){
            wx.chooseImage({
                sizeType: ['original', 'compressed'],
                success: (res) => {
                    if (res.errMsg === 'chooseImage:ok') {
                        let files = res.tempFilePaths
                        console.log(files)
                        this.imgTrList.push(files[0])
                        this.upload(files)
                    }
                },
                fail(err) {
                    console.error(err)
                },
                complete: () => {
                    
                }
            })
        },
        // 删除图片
        removeImg(index){
            this.imgTrList.splice(index,1)
        },
        // 预览图片
        preViewImg(item) {
            console.log(this.imgTrList)
            wx.previewImage({
            current: item, // 当前显示图片的http链接
            urls: this.imgTrList, // 需要预览的图片http链接列表
            fail:function(err){
                console.log(err)
            }
            })
        },
        // 上传图片到服务器
        upload(files){

        }
    },
    created(){
        this.imgTrList = this.imgList;
    },
    watch:{
        imgTrList(val){
            this.$emit("changeImgList",val)
        }
    }
}
</script>
